<template>
  <div class="pusettings">
    <div
      class="pushtime flex items-center"
      style="border: none; background: #f5f5f5; padding: 0 10px"
    >
      <span class="pushtime_lg"></span><span>开启推送</span>
      <el-switch
        v-model="switchgear"
        style="--el-switch-on-color: #55d098; margin-left: 20px"
      />
    </div>
    <div class="pushtime mt-[40px] px-[10px]">
      <span class="pushtime_lg"></span><span>推送时间</span>
    </div>
    <div>
      <div class="workdays">
        <span>
          <el-checkbox
            style="
              --el-checkbox-checked-input-border-color: #f43107;
              --el-checkbox-checked-bg-color: #f43107;
            "
            v-model="data.subscription_date"
            size="large"
            :disabled="!switchgear"
            >只在工作日推送</el-checkbox
          ></span
        >
        <div class="workdays_color ml-[20px]">
          （{{ dynamicTags.length }}<span>/{{ setting.ts_num }}</span
          >）
        </div>
      </div>
      <div class="workdays_time">
        <el-tag
          v-for="tag in dynamicTags"
          :key="tag"
          class="mx-1"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
          style="
            margin-left: 15px;
            background: #ffffff;
            border-radius: 4px;
            color: #333;
          "
        >
          {{ tag }}
        </el-tag>
        <el-time-select
          v-if="inputVisible"
          ref="InputRef"
          style="width: 200px"
          v-model="inputValue"
          start="00:00"
          step="01:00"
          end="23:00"
          placeholder="选择推送的时间"
          @keyup.enter="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button
          v-else
          danger
          class="ml-1"
          size="small"
          @click="showInput"
          :disabled="!switchgear"
          style="
            --el-button-hover-bg-color: #fff;
            --el-button-hover-border-color: #f43107;
            --el-button-hover-text-color: #f43107;
          "
        >
          + 添加时间
        </el-button>
      </div>
    </div>

    <div style="margin-top: 50px">
      <div
        class="pushtime px-[10px]"
        v-if="setting.is_k_email == 1 && setting.is_k_sms == 1"
      >
        <span class="pushtime_lg"></span><span>推送方式</span>
      </div>
      <div class="flex items-baseline gap-[40px]">
        <div class="pushemail" v-if="setting.is_k_email == 1">
          <span class="ml-[0px]">
            <el-checkbox
              v-model="email"
              size="large"
              :disabled="!switchgear"
              style="
                --el-checkbox-checked-input-border-color: #f43107;
                --el-checkbox-checked-bg-color: #f43107;
              "
              >邮件推送</el-checkbox
            ></span
          >
          <span class="ml-[0px] text-[#f43107]">
            （{{ emailList.length }}/{{ setting.email_num }}）</span
          >
          <div class="ml-[20px]">
            <div
              class="pushemailBox"
              v-for="(item, index) in emailList"
              :key="index"
            >
              <span class="pushemailBox_one">
                <el-input
                  style="width: 150px"
                  v-model="item.name"
                  placeholder="请输入邮件"
                />
              </span>
              <span class="pushemailBox_two">
                <img
                  v-if="item.id == 1"
                  style="width: 36px; height: 36px"
                  src="@/assets/img/mypoints/jia.png"
                  alt=""
                  @click="emailClick(item.id)"
                />
                <img
                  v-if="item.id != 1"
                  style="width: 36px; height: 36px"
                  src="@/assets/img/mypoints/jian.png"
                  alt=""
                  @click="emailClick_qx(item.id)"
                />
              </span>
            </div>
          </div>
        </div>
        <div class="pushemail" v-if="setting.is_k_sms == 1">
          <span class="ml-[20px]">
            <el-checkbox
              v-model="duanxin"
              size="large"
              :disabled="!switchgear"
              style="
                --el-checkbox-checked-input-border-color: #f43107;
                --el-checkbox-checked-bg-color: #f43107;
              "
              >短信推送</el-checkbox
            ></span
          >
          <span class="ml-[0px] text-[#f43107]">
            （{{ emailList.length }}/{{ setting.email_num }}）</span
          >
          <div class="ml-[20px]">
            <div
              class="pushemailBox"
              v-for="(item, index) in duanxinList"
              :key="index"
            >
              <span class="pushemailBox_one">
                <el-input
                  style="width: 150px"
                  v-model="item.name"
                  placeholder="请输入邮件"
                />
              </span>
              <span class="pushemailBox_two">
                <img
                  v-if="item.id == 1"
                  style="width: 36px; height: 36px"
                  src="@/assets/img/mypoints/jia.png"
                  alt=""
                  @click="daunxinClick(item.id)"
                />
                <img
                  v-if="item.id != 1"
                  style="width: 36px; height: 36px"
                  src="@/assets/img/mypoints/jian.png"
                  alt=""
                  @click="daunxinClick_qx(item.id)"
                />
              </span>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 50%; text-align: center; margin-top: 80px">
        <a-button type="primary" @click="submissions" :disabled="!switchgear"
          >提交</a-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { message } from "ant-design-vue";
import { ref, nextTick, reactive, onMounted } from "vue";
import {
  bxsubscriptionallocation,
  bxsubscriptionts_submit,
  bxsubscriptionts_submit_list,
} from "../../../../Api/work";
import qs from "qs";
let switchgear = ref(false);
let checked1 = ref(false);
let email = ref(true);
let duanxin = ref(false);
const inputValue = ref("");
const dynamicTags = ref([]);
const inputVisible = ref(false);
const InputRef = ref();

const data = ref({
  subscription_date: false,
  subscription_time: [],
  subscription_email: [],
  subscription_sms: [],
});

const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};

const showInput = () => {
  if (dynamicTags.value.length == Number(setting.value.ts_num)) return;

  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = "";
};

let emailList = ref([
  {
    id: 1,
    name: "",
  },
]);

const emailClick = (id) => {
  if (!switchgear.value) return;
  if (emailList.value?.length == Number(setting.value.email_num)) {
    message.error(`不超过${Number(setting.value.email_num)}个`);
    return;
  }
  // if (email.value) {
  emailList.value.push({
    id: id + 1,
    name: "",
  });
  // }
};
const emailClick_qx = (id) => {
  if (id != 1) {
    emailList.value = emailList.value
      .slice(0, 1)
      .concat(emailList.value.slice(2));
  }
};

let duanxinList = ref([
  {
    id: 1,
    name: "",
  },
]);

const daunxinClick = (id) => {
  // if (duanxin.value) {
  if (!switchgear.value) return;
  if (duanxinList.value?.length == Number(setting.value.sms_num)) {
    message.error(`不超过${Number(setting.value.sms_num)}个`);
    return;
  }
  duanxinList.value.push({
    id: id + 1,
    name: "",
  });
  // }
};

const daunxinClick_qx = (id) => {
  if (id != 1) {
    duanxinList.value = duanxinList.value
      .slice(0, 1)
      .concat(duanxinList.value.slice(2));
  }
};

const submissions = async () => {
  data.value = {
    subscription_date: data.value.subscription_date ? "1" : "2",
    subscription_email: emailList.value.map((p) => p.name),
    subscription_sms: duanxinList.value.map((p) => p.name),
    subscription_time: dynamicTags.value,
    subscription_is_on: switchgear.value ? "1" : "2",
    subscription_is_email: email.value ? "1" : "2",
    subscription_is_sms: duanxin.value ? "1" : "2",
  };

  const res = await bxsubscriptionts_submit(data.value);

  if (res?.data?.code == 1) {
    message.success("操作成功");
    before();
  } else {
    message.error(res?.data?.msg);
  }
};

const setting = ref({
  email_num: 10,
  is_k_email: 1,
  is_k_sms: 1,
  sms_num: 10,
  ts_num: 10,
});

const before = async () => {
  const res = await bxsubscriptionallocation();
  setting.value = res.data.data;

  const res2 = await bxsubscriptionts_submit_list();

  data.value = {
    subscription_date: data.value.subscription_date ? "1" : "2",
    subscription_email: emailList.value.map((p) => p.name),
    subscription_sms: duanxinList.value.map((p) => p.name),
    subscription_time: dynamicTags.value,
    subscription_is_on: switchgear.value ? "1" : "2",
    subscription_is_email: email.value ? "1" : "2",
    subscription_is_sms: duanxin.value ? "1" : "2",
  };

  const params = res2?.data?.data;
  data.value = {
    subscription_date: params.subscription_date == 1,
  };


  if ((JSON.parse(params.subscription_email) || [])?.length != 0) {
    emailList.value = (JSON.parse(params.subscription_email) || [])?.map(
      (p, index) => {
        return {
          id: index + 1,
          name: p,
        };
      }
    );
  }

  if ((JSON.parse(params.subscription_sms) || [])?.length != 0) {
    duanxinList.value = (JSON.parse(params.subscription_sms) || [])?.map(
      (p, index) => {
        return {
          id: index + 1,
          name: p,
        };
      }
    );
  }
  dynamicTags.value = JSON.parse(params.subscription_time) || [];

  switchgear.value = params.subscription_is_on == 1;

  email.value = params.subscription_is_email == 1;
  duanxin.value = params.subscription_is_sms == 1;
};

onMounted(() => {
  before();
});
</script>

<style lang="scss" scoped>
.pushtime_lg {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  margin-right: 15px;
  background-color: #f43107;
}

.pushemail {
  display: flex;
  align-items: baseline;
  width: 500px;
  margin-top: 30px;

  .pushemailBox {
    display: flex;
    align-items: center;
    margin-top: 15px;

    .pushemailBox_two {
      margin-left: 15px;
    }
  }
}

.pusettings {
  min-height: calc(100vh - 340px);
  background-color: #fff;

  .pushtime {
    display: flex;
    height: 40px;
    border-bottom: 1px solid #eeeeee;
  }

  .workdays {
    display: flex;
    align-items: center;

    .workdays_color {
      color: #f43107;
    }
  }

  .workdays_time {
    margin-top: 15px;
  }
}

::v-deep {
  .el-checkbox.el-checkbox--large .el-checkbox__inner {
    width: 15px;
    height: 15px;
  }

  .el-checkbox.el-checkbox--large .el-checkbox__label {
    margin-left: 5px;
    font-size: 15px;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #000;
  }
  .el-tag .el-tag__close {
    color: #333;
  }
  .el-tag .el-tag__close:hover {
    background: #fff;
  }
}
</style>  